<template>
  <div class="show-main">
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(images, index) in swiperList" :key="index">
        <img class="lunbo-img" v-lazy="images" />
      </van-swipe-item>
    </van-swipe>

    <!-- 功能商品按块展示 -->
    <div class="card">
      <div class="title">
        <p>办公椅/工学椅</p>
        <span>久坐不累 关爱自己</span>
      </div>
      <div class="goods">
        <div class="item" v-for="item in 4">
          <img width="172.5px" class="img" src="https://yanxuan-item.nosdn.127.net/7c66c28e81450d9e4da9b72454b82833.png?type=webp&imageView&quality=65&thumbnail=330x330"/>
          <div class="item-tit">玩转系列 撑腰护颈人体工学椅</div>
          <div class="price">到手价￥<span>684</span><del>$699</del></div>
          <div class="jian"><span>满99减15元</span></div>
          <!-- <button class="hongbao">可用红包</button> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// 引入vue核心库
import Vue from 'vue';
// 引入vant 图片懒加载组件
import { Lazyload } from 'vant';

Vue.use(Lazyload);
export default {
  // 组件名字
  name: "GoodsList",
  // 状态数据
  data() {
    return {
      // 轮播图懒加载--图片数组
      swiperList: [
        "https://yanxuan.nosdn.127.net/ce39cbc892150e0a1e66a4dc15a4e4e0.jpg?type=webp&imageView&quality=75&thumbnail=750x0",
        "https://yanxuan.nosdn.127.net/static-union/1660098694dc59e2.jpg?type=webp&imageView&quality=75&thumbnail=750x0",
        "https://yanxuan.nosdn.127.net/static-union/166081096437b102.jpg?type=webp&imageView&quality=75&thumbnail=750x0",
      ],
    };
  },
};
</script>
<style lang="less" scoped>
.show-main {
  background-color: #eee;

  /*轮播*/
  .lunbo-img {
    width: 100%;
    height: 195px;
  }
  /*轮播图指示器样式*/
  .van-swipe /deep/ .van-swipe__indicator {
    width: 20px;
    height: 2px;
    background-color: white;
    border-radius: 0;
  }

  /*商品*/
  .card {
    background-color: white;
    margin-top: 20px;
    padding: 10px 0;
    border-radius: 5px;
    .title {
      text-align: center;
      p {
        margin: 0;
        padding: 0;
        font-size: 16px;
        color: #333;
      }
      span {
        font-size: 12px;
        color: #999;
      }
    }
    .goods {
        display: flex;
        flex-wrap: wrap;
        padding-left: 10px;
      .item {
        width: 50%;
        height: 284px;
        margin-top: 10px;
        .img{
          display: block;
          border-radius: 10px;
        }

        .item-tit {
          font-size: 15px;
        }
        .price {
          color: #fa1e32;
          font-size: 12px;
          span {
            font-size: 20px;
            font-weight: 700;
          }
          del {
            color: #999;
          }
        }
        .jian {
          span {
            background-color: #fa1e32;
            color: white;
            font-size: 12px;
            border-radius: 10px;
            border: none;
            padding: 0 5px;
          }
        }
      }
    }
  }
}
</style>
